<template>
  <div class="listOne">
    <div class="container">
      <ul>
        <li v-for="proitem in products" :key="proitem.name">{{proitem.name}} ${{ proitem.price }}</li>
      </ul>
      <button id="btn1" @click="reducePrice(2)" >按钮</button>
    </div>
  </div>
</template>
<script>
export default {
  data(){
    return {
      products: this.$store.getters.getpro
    }
  },
   methods :{
    reducePrice(amount){
      this.$store.commit('reduce',amount)
    }
  }

}
</script>
<style lang="less" scoped>
.listOne{
  width: 450px;
  background-color: yellow;
  ul{
    list-style-type: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    li{
      padding: 15px;
      margin:15px;
      background-color: green;
      width: 100px;
      height: 40px;
    }
  }

}
</style>
